<template>
    <div>
           <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">数据统计</a></el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>

         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 620px;height:310px;float:left; display:inline"></div>
    <div id="next" style="width: 600px;height:310px;float:left;display:inline"></div>
   
     <div id="main1" style="width: 600px;height:300px;float:left; display:inline"></div>
      <div id="main2" style="width: 600px;height:300px;float:left; display:inline"></div>
     <el-button type="success"  @click="addDialogVisible = true" style="width:100%;height:70%">点击查看智能分析结果
     </el-button>

       <!-- 添加用户的对话框 -->
    <el-dialog
      title="决策分析:"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogColsed"
    >
   
     <el-table :data="tableData"  border stripe id="table1">
       <el-table-column  label="商品名称"  align="center"  prop="name"></el-table-column> 
       <el-table-column  label="上月售价(元)" align="center"  prop="oldprice"></el-table-column> 
       <el-table-column label="商品成本价(元)" align="center"  prop="firstprice"></el-table-column>
              <el-table-column label="访问量变化率" align="center"  prop="fixedneed"></el-table-column>   
        <el-table-column  label="上月销量(台)" align="center"  prop="oldsold"></el-table-column>
         <el-table-column  label="最优售价(元)" align="center"  prop="mean"  ></el-table-column>
          
     </el-table>
   
  
  <span  slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
       <el-button type="success" @click="addnewDialogVisible = true" >下一页</el-button>
  </span>
    </el-dialog>


     <el-dialog
      title="决策分析:"
      :visible.sync="addnewDialogVisible"
      width="50%"
      @close="addnewDialogVisible"
    >
     
     <div id="table1">
              <el-table :data="tableData"  border stripe id="table1">
       <el-table-column  label="商品的名称"  align="center"  prop="name"></el-table-column> 
       <el-table-column  label="上月售价(元)" align="center"  prop="oldprice"></el-table-column> 
       <el-table-column label="绝对需求" align="center"  prop="fixedneed"></el-table-column>  
       <el-table-column label="商品成本价(元)" align="center"  prop="firstprice"></el-table-column>
        <el-table-column  label="上月销量(台)" align="center"  prop="oldsold"></el-table-column>
         <el-table-column  label="最优售价(元)" align="center"  prop="mean"  ></el-table-column> 
         </el-table>
     </div>

   
  <span  slot="footer" class="dialog-footer">
    <el-button @click="addnewDialogVisible = false;addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addnewDialogVisible = false;addDialogVisible = false">确 定</el-button>
       <el-button type="success" @click="addnewDialogVisible = true;addDialogVisible = false" >下一页</el-button>
  </span>
    </el-dialog>

    </el-card>

    </div>
</template>

<script>
//1.导入echarts
import * as echarts from 'echarts';
//import echarts from 'echarts'
import _ from 'lodash'
export default {
    data(){
        return { 
   tableData:[
      {
           name:'海尔电视',
           oldprice:3288,
           fixedneed:'12%',
           firstprice:2280,
           oldsold:80,
           mean:'3386'
       },
       {
           name:'惠普电脑',
           oldprice:5298,
           fixedneed:'8%',
           firstprice:3680,
           oldsold:91,
           mean:'5324'
       },
       {
           name:'iphone 12',
           oldprice:8888,
           fixedneed:'-5%',
           firstprice:5280,
           oldsold:54,
           mean:'8843'
       },
       {
           name:'康师傅牛肉面',
           oldprice:60,
           fixedneed:'15%',
           firstprice:40,
           oldsold:102,
           mean:'62.9'
       },
       {
           name:'冲锋衣',
           oldprice:288,
           fixedneed:'20%',
           firstprice:123,
           oldsold:68,
           mean:'297'
       },
       {
           name:'小米电视',
           oldprice:4999,
           fixedneed:'-9%',
           firstprice:2280,
           oldsold:154,
           mean:'4974'
       },
       {
           name:'iPad 2020',
           oldprice:2288,
           fixedneed:'14%',
           firstprice:1080,
           oldsold:77,
           mean:'2325'
       },
       {
           name:'蓝牙耳机',
           oldprice:1288,
           fixedneed:'7%',
           firstprice:580,
           oldsold:56,
           mean:'1294'
       },
       {
           name:'足球鞋',
           oldprice:688,
           fixedneed:'5%',
           firstprice:380,
           oldsold:35,
           mean:'691'
       },
     
   ],

            addDialogVisible:false,
            addnewDialogVisible:false,
             options: {
          title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#E9EEF3'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              boundaryGap: false
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ]
        }}
    },
    created(){

    },
  
   async mounted() {
             // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));

      const {data:res} =  await this.$http.get('reports/type/1')
      if(res.meta.status!==200)
      return this.$message.error('获取折线数据失败!')

     

    const result =  _.merge(res.data,this.options)
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(result);

       var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

var chartDom = document.getElementById('next');
var myChart = echarts.init(chartDom);
var option;

var weatherIcons = {
    'Sunny': ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
    'Cloudy': ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
    'Showers': ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};

option = {
    title: {
        text: '近一周用户访问渠道',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        bottom: 10,
        left: 'center',
        data: ['西凉', '益州', '兖州', '荆州', '幽州']
    },
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
                {
                    value: 1548,
                    name: '',
                    label: {
                        formatter: [
                            '淘宝'
                        
                        ].join('\n'),
                        backgroundColor: '#eee',
                        borderColor: '#777',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            title: {
                                color: '#eee',
                                align: 'center'
                            },
                            abg: {
                                backgroundColor: '#333',
                                width: '100%',
                                align: 'right',
                                height: 25,
                                borderRadius: [4, 4, 0, 0]
                            },
                            Sunny: {
                                height: 30,
                                align: 'left',
                                backgroundColor: {
                                    image: weatherIcons.Sunny
                                }
                            },
                            Cloudy: {
                                height: 30,
                                align: 'left',
                                backgroundColor: {
                                    image: weatherIcons.Cloudy
                                }
                            },
                            Showers: {
                                height: 30,
                                align: 'left',
                                backgroundColor: {
                                    image: weatherIcons.Showers
                                }
                            },
                            weatherHead: {
                                color: '#333',
                                height: 24,
                                align: 'left'
                            },
                            hr: {
                                borderColor: '#777',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            value: {
                                width: 20,
                                padding: [0, 20, 0, 30],
                                align: 'left'
                            },
                            valueHead: {
                                color: '#333',
                                width: 20,
                                padding: [0, 20, 0, 30],
                                align: 'center'
                            },
                            rate: {
                                width: 40,
                                align: 'right',
                                padding: [0, 10, 0, 0]
                            },
                            rateHead: {
                                color: '#333',
                                width: 40,
                                align: 'center',
                                padding: [0, 10, 0, 0]
                            }
                        }
                    }
                },
                {value: 735, name: '浏览器'},
                {value: 510, name: '拼多多'},
                {value: 434, name: '微信'},
                {value: 335, name: '其他'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);


var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;

option = {
     title: {
        text: '近一周成交量',
        subtext: '',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        data: ['2-26', '2-27', '2-28', '3-1', '3-2', '3-3', '3-4']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [750, 900, 600, 879, 1400, 1200, 1600],
        type: 'line',
        symbol: 'triangle',
        symbolSize: 20,
        lineStyle: {
            color: '#5470C6',
            width: 4,
            type: 'dashed'
        },
        itemStyle: {
            borderWidth: 3,
            borderColor: '#EE6666',
            color: 'red'
        }
    }]
};

option && myChart.setOption(option);


var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;

option = {
     title: {
        text: '周利润',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['2-26', '2-27', '2-28', '3-1', '3-2', '3-3', '3-4'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '利润（元）',
            type: 'bar',
            barWidth: '60%',
            data: [23000, 29809, 21807, 31400, 37085, 21784, 49574],
            color:'rgb(123, 182, 207)'
        }
    ]
};

option && myChart.setOption(option);

    },
    methods:{
    
        
      }
}


</script>



<style lang="less">
.el-button{

}
</style>